import { notFound } from 'next/navigation'
import ReadingProgress from '@/components/ReadingProgress'
import TableOfContents from '@/components/TableOfContents'
import PostInteractions from '@/components/PostInteractions'
import MarkdownContent from '@/components/MarkdownContent'
import { getPostById } from '@/lib/index'
import { processContent } from '@/utils/markdown'
import BackButton from '@/components/BackButton'


async function getPost(postId: number) {
  const post = await getPostById(postId)
  if (post && post.content) {
    // 处理文章内容，确保代码块正确高亮显示
    post.content = await processContent(post.content)
  }
  return post
}

export default async function PostPage({ params }: { params: { slug: string } }) {
  const postId = parseInt(params.slug, 10)
  
  if (isNaN(postId)) {
    notFound()
  }

  const post = await getPost(postId)
  
  if (!post) {
    notFound()
  }

  const onBack = () => {
    window.history.back()
  }

  return (
    <>
      <ReadingProgress />
      <main className="min-h-screen p-4 md:p-8">
        <div className="max-w-4xl mx-auto flex gap-8">
          {/* 侧边栏 */}
          <aside className="hidden lg:block flex-none max-w-[16rem]">
            <TableOfContents />
          </aside>

          {/* 文章主体 */}
          <article className="flex-grow max-w-full bg-white dark:bg-gray-800 rounded-lg shadow p-4 md:p-8">
            <header className="mb-8">
              <div className="flex items-center gap-3 mb-6 pb-4">
                <BackButton />
                <div>
                  <h1 className="text-2xl font-bold m-0">
                    {post.title}
                  </h1>
                </div>
              </div>
              {/* <h1 className="text-4xl font-bold mb-4 dark:text-white">{post.title}</h1> */}
              <div className="flex flex-wrap gap-2 mb-4">
                {post.category && (
                  <span className="text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                    {post.category.name}
                  </span>
                )}
                {post.tags
                .filter(tag => post.category?.name !== tag)
                .map((tag, index) => (
                  <span key={`${post.id}-${tag}-${index}`} className="text-sm bg-gray-100 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 rounded">
                    {tag}
                  </span>
                ))}
              </div>
              <div className="flex items-center justify-between">
                <div className="text-gray-500 dark:text-gray-400">发布于 {post.created_at}</div>
                <PostInteractions postId={post.id} />
              </div>
            </header>

            <div className="prose dark:prose-invert max-w-none">
              <MarkdownContent content={post.content.replace(post.title,'') } />
            </div>

            {/* 评论区 */}
            {/* <Comments postId={post.id} initialComments={comments} /> */}
          </article>
        </div>
      </main>
    </>
  )
}